<template>
    <div @click="toOrderDetail()" :class="{order_detail: true, cancelBorder: orderType === 3 }" v-if="orderItem">
        <div class="order_number">
            <span class="order_text">订单号</span>
            <span class="order_content">{{orderItem.id}}</span>
        </div>
        <div class="order_number">
            <span class="order_text">收货人</span>
            <span class="order_content">{{orderItem.consigneeName}}</span>
        </div>
        <div class="order_number">
            <span class="order_text">收货地址</span>
            <span class="order_content">{{ orderItem.addressDetail }}</span>
        </div>
        <div class="order_number">
            <span class="order_text">订单状态</span>
            <span class="order_content" style="color:#f3a13a">{{ orderItem.statusStr }}</span>
        </div>
        <div class="order_count">
				<span class="order_count_text">共
				<span class="order_count_num">{{ orderItem.goodsCount }}</span>
				件商品  合计：</span>
            <span class="order_sum">¥ {{ orderItem.finalPrice }}</span>
        </div>
        <orderBtn :orderType="orderType" :orderItem="orderItem" v-if="orderItem"></orderBtn>
    </div>
</template>

<script>
  import orderBtn from './orderBtn'
  export default {
    name: 'my_order',
    props: {
      orderItem: {
        type: Object,
        default: {}
      },
      showButton: {
        type: Array,
        default: function () {
          return ["退换货申请", "确认付款"]
        }
      },
      orderType: {
        // 支持有圆角和没有圆角两种形式的订单
        // 1/2代表有圆角 1 正常订单 2 退换货订单
        // 3代表没有圆角的
        type: Number,
        default: 1,
      },
      salesReturn: {
        // 退货状态 being 正在审核中 succeed 退货成功
        type: String,
        default: 'being',
      }
    },
    components: {
      orderBtn,
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

    @import "../../css/common";

    .order_detail {
        margin: 20px 30px 0px;
        padding: 24px 24px 32px;
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
        border-radius: 16px;
        > div {
            .order_text {
                display: inline-block;
                width: 112px;
                font-size: 26px;
                color: #999999;
                margin-bottom: 24px;
                margin-right: 34px;
                :last-child {
                    margin-bottom: 32px;
                }
            }
            .order_content {
                font-size: 28px;
                color: #333333;
            }
        }
        .order_count {
            align-self: flex-end;
            margin-bottom: 48px;
            .order_count_text {
                font-size: 24px;
                color: #999999;
                .order_count_num {
                    color: @color_orange;
                }
                .order_sum {
                    font-size: 32px;
                    color: #333333;
                }
            }
        }
        .order_button {
            align-self: flex-end;
            display: flex;
            .order_being {
                color: #ff0000;
                font-size: 26px;
            }
            .order_succeed {
                color: #999999;
                font-size: 26px;
            }
        }
    }

    .cancelBorder {
        border-radius: 0px !important;
        margin: 20px 0px;
        padding: 32px 32px 0px;
        width: 100%;
        box-sizing: border-box;
    }
</style>
